function img_ajax() {
	var xhr = new XMLHttpRequest();
	xhr.open('POST', 'http://build.bluej.cn/api/index/get_carousel/'); //0
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //请求头
	xhr.send('position_id=5'); //1
	xhr.addEventListener('readystatechange', function() {
		if(xhr.readyState == 4) {
			if(xhr.status == 200) {
				console.log(JSON.parse(xhr.responseText));
				img_in(JSON.parse(xhr.responseText));
				var kaShouBox1 = new kaShou('#carousel_box1');
			} else {
				alert('BOOM SHA KA LA KA ! 请  求  失  败 !');
			}
		}
	});
}

function img_in(obj) {
	var ul_box = document.querySelector('#carousel_box1 ul');
	for(var i = 0; i < obj.data.length; i++) {
		ul_box.innerHTML += '<li><img src=http://build.bluej.cn' + obj.data[i].ch_img_url + '></li>';
	}
}
//图片请求
img_ajax();
/********************************************************************************************************************/
function kaShou(id_name) {
	this.box = document.querySelector(id_name);
	this.ul = this.box.querySelector('ul');
	this.ulis = this.box.querySelectorAll('ul li');
	this.left_arrow = this.box.querySelector('.left_arrow');
	this.right_arrow = this.box.querySelector('.right_arrow');
	this.ol = this.box.querySelector('ol');
	this.olis = this.ol.getElementsByTagName('li');
	this.now_index = 0;
	this.last_index = 0;
	this.onoff = false;
	this.timer;
	this.new_li;

	//动态生成控制圆点
	for(var i = 0; i < this.ulis.length; i++) {
		this.new_li = document.createElement('li');
		this.ol.appendChild(this.new_li);
	}
	this.olis[0].classList.add('active');

	//右
	this.right_arrow.addEventListener('click', function() {
		if(!this.onoff) {
			this.onoff = true;
			++this.now_index >= this.ulis.length ? this.right_run(this.now_index) : this.run();
		}
	}.bind(this));

	//左
	this.left_arrow.addEventListener('click', function() {
		if(!this.onoff) {
			this.onoff = true;
			if(--this.now_index < 0) {
				this.left_run(this.now_index);
			} else {
				this.run();
			}
		}
	}.bind(this));

	//圆点控制之自运行匿名函数
	//for(var i = 0; i < this.ulis.length; i++) {
	//	(function(i) {
	//		this.olis[i].addEventListener('click', function() {
	//			this.now_index = i;
	//			this.run(i);
	//		}.bind(this));
	//	}.bind(this))(i)
	//}

	//圆点控制之let（ES6）
	for(let i = 0; i < this.ulis.length; i++) {
		this.olis[i].addEventListener('click', function() {
			this.now_index = i;
			this.run(i);
		}.bind(this));
	}

	//鼠标停留时轮播暂停，鼠标离开时轮播继续。
	this.box.addEventListener('mouseover', function() {
		clearInterval(timer);
	});
	this.box.addEventListener('mouseout', function() {
		this.auto_play();
	}.bind(this));
	this.auto_play();
}

//主函数（方便团队开发）将run（）方法挂载在kaShou（）方法里
kaShou.prototype.run = function() {
	this.ul.style.transform = 'translateX(-' + this.now_index + '00%)';
	this.olis[this.last_index].classList.remove('active');
	this.olis[this.now_index].classList.add('active');
	this.last_index = this.now_index;
	this.ul.addEventListener('transitionend', function() {
		this.onoff = false;
	}.bind(this));
}

//右无缝
kaShou.prototype.right_run = function() {
	var right_end = right_run_end.bind(this);
	this.new_li = this.ulis[0].cloneNode(true);
	this.ul.appendChild(this.new_li);
	this.ul.style.transform = "translateX(-" + this.now_index + "00%)";
	this.ul.addEventListener('transitionend', right_end);
	this.olis[this.last_index].classList.remove('active');
	this.last_index = 0;
	this.now_index = 0;
	this.olis[this.now_index].classList.add('active');

	function right_run_end() {
		this.ul.style.transition = 'none';
		this.ul.style.transform = 'translateX(0%)';
		getComputedStyle(this.ul).transition;
		this.ul.style.transition = '';
		this.new_li.remove();
		this.onoff = false;
		this.ul.removeEventListener('transitionend', right_end);
	}
}

//左无缝
kaShou.prototype.left_run = function() {
	var left_end = left_run_end.bind(this);
	this.new_li = this.ulis[this.ulis.length - 1].cloneNode(true);
	this.ul.style.transition = 'none';
	this.ul.insertBefore(this.new_li, this.ulis[0]);
	this.ul.style.transform = 'translateX(-100%)';
	getComputedStyle(this.ul).width;
	this.ul.style.transition = '';
	this.ul.style.transform = 'translateX(0%)';
	this.ul.addEventListener('transitionend', left_end);
	this.olis[this.last_index].classList.remove('active');
	this.last_index = this.olis.length - 1;
	this.now_index = this.olis.length - 1;
	this.olis[this.now_index].classList.add('active');

	function left_run_end() {
		this.ul.style.transition = 'none';
		this.ul.style.transform = 'translateX(-' + (this.ulis.length - 1) + '00%)';
		getComputedStyle(this.ul).width;
		this.ul.style.transition = '';
		this.new_li.remove();
		this.onoff = false;
		this.ul.removeEventListener('transitionend', left_end);
	}
}

//自动轮播函数
kaShou.prototype.auto_play = function() {
	timer = setInterval(function() {
		if(!this.onoff) {
			this.onoff = true;
			++this.now_index >= this.ulis.length ? this.right_run(this.now_index) : this.run();
		}
	}.bind(this), 2000);
}

var kaShouBox2 = new kaShou('#carousel_box2');